<template xmlns="http://www.w3.org/1999/html">
  <div>
    <div class="common_form_search">
      <el-form :inline="true" :model="articleFrom">
        <!--      <el-form-item label="选择供应商" label-width="120px">-->
        <!--        <el-select-->
        <!--            v-model="articleFrom.memberId"-->
        <!--            placeholder="请选择"-->
        <!--            clearable-->
        <!--            @change="changeMemberList()"-->
        <!--        >-->
        <!--          <el-option-->
        <!--              v-for="item in memberList"-->
        <!--              :key="item.member_id"-->
        <!--              :label="item.shopname"-->
        <!--              :value="item.member_id"-->
        <!--          />-->
        <!--        </el-select>-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="状态">-->
        <!--        <el-select-->
        <!--            v-model="articleFrom.status"-->
        <!--            placeholder="全部"-->
        <!--            clearable-->
        <!--        >-->
        <!--          <el-option-->
        <!--              v-for="items in options"-->
        <!--              :key="items.id"-->
        <!--              :label="items.label"-->
        <!--              :value="items.id">-->
        <!--          </el-option>-->
        <!--        </el-select>-->
        <!--      </el-form-item>-->
        <!--      <el-form-item label="发货类别">-->
        <!--        <el-select-->
        <!--            v-model="articleFrom.parentid"-->
        <!--            placeholder="全部"-->
        <!--            clearable-->
        <!--        >-->
        <!--          <el-option-->
        <!--              v-for="itemes in  deliveryCategory"-->
        <!--              :key="itemes.id"-->
        <!--              :label="itemes.label"-->
        <!--              :value="itemes.id"-->
        <!--          ></el-option>-->
        <!--        </el-select>-->
        <!--      </el-form-item>-->
        <el-form-item label="订单生成时间">
          <el-date-picker
            v-model="articleFrom.value1"
            type="daterange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            @change="changTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="ridio">
            <el-radio :label="1" @click.native="onSubmit()"
              >发货量 & 逾期量</el-radio
            >
            <el-radio :label="2" @click.native="inSubmit()"
              >发货率 & 逾期率</el-radio
            >
          </el-radio-group>
          <!--        <el-button-->
          <!--            size="small"-->
          <!--            type="primary"-->
          <!--            @click="onSubmit()"-->
          <!--        >发货量查询</el-button>-->
          <!--        <el-button-->
          <!--            size="small"-->
          <!--            type="success"-->
          <!--            @click="inSubmit()"-->
          <!--        >发货率查询</el-button>-->
          <!--        <el-button-->
          <!--            size="small"-->
          <!--            @click="onReset()"-->
          <!--        >重置</el-button>-->
        </el-form-item>
        <el-form-item label="平台来源">
          <el-select
            @change="() => {
              commonSubmit();
            }"
            size="large"
            style="width: 200px"
            v-model="articleFrom.system_platform"
          >
            <el-option :key="'请选择'" :label="'全部'" :value="''"></el-option>
            <el-option
              v-for="item in platformSelectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div style="padding-left: 130px">
          <div class="echart" id="mychart" :style="myChartStyle"></div>
        </div>
        <el-row style="padding-left: 100px">
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  总订单量:<br />{{ this.orderCount }}
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  有效订单量:<br />{{
                    this.articleFrom.ValidOrder == ""
                      ? 0
                      : this.articleFrom.ValidOrder
                  }}
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  发货量:<br />{{
                    this.articleFrom.shipment == ""
                      ? 0
                      : this.articleFrom.shipment
                  }}
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  发货率:<br />{{
                    this.articleFrom.avgDelivery == 0
                      ? 0
                      : this.articleFrom.avgDelivery + "%"
                  }}
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="3">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  风控不通过:<br />{{
                    this.articleFrom.riskBad == 0 ? 0 : this.articleFrom.riskBad
                  }}
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div style="margin-top: 20px"></div>
        <el-row style="padding-left: 100px">
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  应收金额:<br />{{
                    this.articleFrom.allRent == 0 ? 0 : this.articleFrom.allRent
                  }}
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  逾期金额:<br />{{
                    this.articleFrom.overDueRent == 0
                      ? 0
                      : this.articleFrom.overDueRent
                  }}
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  坏账金额率:<br />{{
                    this.articleFrom.badPayRate == 0
                      ? 0
                      : this.articleFrom.badPayRate + "%"
                  }}
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  逾期率:<br />{{
                    this.articleFrom.overdueDelivery == 0
                      ? 0
                      : this.articleFrom.overdueDelivery + "%"
                  }}
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3" style="margin-right: 100px">
            <el-card class="box-card" style="width: 250px; height: 100px">
              <div
                style="text-align: center; font-weight: bold; font-size: 22px"
                class="container"
              >
                <div style="padding-top: 7px">
                  首逾率:<br />{{
                    this.articleFrom.firstOverRate == 0
                      ? 0
                      : this.articleFrom.firstOverRate + "%"
                  }}
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!--      <div>-->
        <!--        <hr/>-->
        <!--      </div>-->

        <el-form-item label="详细数据" style="margin-top: 30px">
          <el-select v-model="articleFrom.region" @change="choose">
            <el-option label="商家" value="1"></el-option>
            <el-option label="推广员" value="2"></el-option>
            <el-option label="风控结果" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row>
        <template v-if="this.articleFrom.region == 3">
          <span v-for="value in dataes">
            <el-col :span="6">
              <el-card class="box-card" style="width: 250px">
                <div style="font-weight: bold">
                  {{
                    value.shopname == 1
                      ? "优"
                      : value.shopname == 2
                      ? "良"
                      : "一般"
                  }}
                </div>
                <!--                    <div>总订单量:{{value.allCount}}</div>-->
                <div>有效订单量:{{ value.count1 }}</div>
                <div>发货量:{{ value.count2 }}</div>
                <div>发货率:{{ value.rate + "%" }}</div>
                <div>逾期量:{{ value.count3 }}</div>
                <div>逾期率:{{ value.yqRate + "%" }}</div>
              </el-card>
            </el-col>
          </span>
        </template>
        <template v-if="this.articleFrom.region == 1">
          <span v-for="value in dataes">
            <el-col :span="6">
              <el-card class="box-card" style="width: 280px">
                <div style="font-weight: bold">
                  {{ value.shopname ? value.shopname : "自然流量" }}
                </div>
                <div style="font-weight: bold">负责人:{{ value.people }}</div>
                <div>总订单量:{{ value.allCount }}</div>
                <div>有效订单量:{{ value.count1 }}</div>
                <div>发货量:{{ value.count2 }}</div>
                <div>发货率:{{ value.rate.toFixed(2) + "%" }}</div>
                <div>逾期量:{{ value.count3 }}</div>
                <div>逾期率:{{ value.yqRate + "%" }}</div>
                <div>
                  坏账率:{{
                    value.badRate == null ? 0 + "%" : value.badRate + "%"
                  }}
                </div>
              </el-card>
            </el-col>
          </span>
        </template>
        <template v-if="this.articleFrom.region == 2">
          <span v-for="value in dataes">
            <el-col :span="6">
              <el-card class="box-card" style="width: 280px">
                <div style="font-weight: bold">
                  {{ value.shopname ? value.shopname : "自然流量" }}
                </div>
                <div>总订单量:{{ value.allCount }}</div>
                <div>有效订单量:{{ value.count1 }}</div>
                <div>发货量:{{ value.count2 }}</div>
                <div>发货率:{{ value.rate.toFixed(2) + "%" }}</div>
                <div>逾期量:{{ value.count3 }}</div>
                <div>逾期率:{{ value.yqRate + "%" }}</div>
              </el-card>
            </el-col>
          </span>
        </template>
      </el-row>

      <!--    <el-select-custom-->
      <!--        clearable-->
      <!--        collapse-tags-->
      <!--        v-model="searchForm.cardTypeList"-->
      <!--        @change="isMileageCardOrder"-->
      <!--    >-->
      <!--      <el-option-->
      <!--          v-for="(item,index) in this.makeSelectOptions(bizTpListNew)"-->
      <!--          :key="index"-->
      <!--          :label="$t(item.label)"-->
      <!--          :value="item.value"-->
      <!--      >-->
      <!--      </el-option>-->
      <!--    </el-select-custom>-->
    </div>
  </div>
</template>

<script>
import { getInfoTypeList } from "@/api/web";
import { orderList } from "@/api/order";
import { shipMent, validOrderCount, merChant, yxCount } from "@/api/order";
import { getMemberList } from "@/api/system";
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
import * as echarts from "echarts";
import { getPlatform } from "@/api/user";
import {
  getArticleList,
  delArticle,
  editHome,
  editHot,
  editStatus,
} from "@/api/article";
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      myChartStyle: { float: "center", width: "100%", height: "400px" }, //图表样式
      articleFrom: {
        article_title: "",
        system_platform: "",
        status: "",
        parentid: "",
        publish_time: "",
        memberId: "",
        yData: [], //纵坐标 (发货量)
        yqData: [], //纵坐标 (逾期量)
        xData: [], //横坐标
        value1: "",
        shipment: "", //发货量
        data1: [],
        data2: [],
        ValidOrder: "", //有效订单量
        avgDelivery: "", //发货率
        region: "1",
        overdueDelivery: "", //总逾期率
        firstOverRate: "", //首逾率
        riskBad: "",
        badPayRate: "", //坏账率,
        allRent: "", //总租金
        overDueRent: "", //逾期租金
      },
      ridio: 1,
      dataes: [],
      myChart: null,
      // options:[{
      //   id: 1,
      //   label: '[优]风控通过，建议发货（该类用户建议发货率80%以上)'
      // }, {
      //   id: 2,
      //   label: '[良]建议适当预收客户租金，正常电审（建议发货率30%以上)'
      // }, {
      //   id: 3,
      //   label: '[一般]中高风险，建议电审，如 1.通过核实用户的工作情况和累计贷款金额等，判断偿还能力；2.核实常驻地址；3.增加紧急联系人（该类用户发货率不做要求)'
      // }],
      deliveryCategory: [
        {
          id: 1,
          label: "发货量",
        },
        {
          id: 2,
          label: "发货率",
        },
      ],
      platformSelectList: [],
      memberList: [],
      topTypeList: [],
      tableData: [],
      total: 0,
      handleId: "",
      searchObj: {},
      orderCount: "",
    };
  },
  // created() {
  //   this.articleFrom.region =this.option.ridio[0].value;
  // },
  mounted() {
    // this.getTopType();
    // this.getTableLists();
    getPlatform().then((res) => {
      this.platformSelectList = res;
    });
    this.ridio1 = 1;
    const start = new Date();
    let year = start.getFullYear();
    var month = start.getMonth() + 1;
    var day = start.getDate() - 1;
    let str = [year, month, day];
    let startTime = str.join("-");
    let endTime = str.join("-");
    var arr = [];
    arr[0] = startTime + " " + "00:00:00";
    arr[1] = endTime + " " + "23:59:59";
    // arr[0]='2021-11-06 00:00:00';
    // arr[1]='2022-11-06 23:59:59';
    this.articleFrom.value1 = arr;

    this.updateData();

    // this.updateData1();
    //  console.log(this.articleFrom.ValidOrder)
    //  console.log(this.articleFrom.shipment)
    // this.initEcharts();

    // orderList({...this.articleFrom}).then((res) =>{
    //   //订单数量
    //   // this.orderCount = res.count.all;
    // })

    this.getSelectTerrace();
    this.choose();
    this.updataYx();
  },
  methods: {
    choose() {
      var arr = [];
      arr = this.articleFrom.value1;

      var startTime = arr[0];
      var endDate = arr[arr.length - 1];
      var type = this.articleFrom.region;

      let data = {
        startTime,
        endDate,
        type,
      };
      if(this.articleFrom.system_platform){
        data.system_platform = this.articleFrom.system_platform;
      }
      merChant(data).then((res) => {
        this.dataes = res;
      });
    },
    getTopType() {
      getInfoTypeList().then((res) => {
        this.topTypeList = res;
      });
    },
    changeMemberList() {
      let obj = "";
      obj = this.memberList.find((item) => {
        return item.member_id === this.articleFrom.memberId;
      });
    },

    getSelectTerrace() {
      getMemberList().then((res) => {
        this.memberList = res || [];
      });
    },
    initEcharts1() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.articleFrom.xData,
        },
        //图例
        legend: {
          data: ["逾期率", "发货率"],
          top: "0%",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line", //形状为折线图
            data: this.articleFrom.yqData,
            name: "逾期率",
            label: {
              show: true,
              position: "top", // 在上方显示
              formatter: "{c}%",
            },
          },
          {
            type: "line", //形状为折线图
            data: this.articleFrom.yData,
            name: "发货率",
            label: {
              show: true,
              position: "top", // 在上方显示
              formatter: "{c}%",
            },
          },
        ],
      };

      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.articleFrom.xData,
        },
        //图例
        legend: {
          data: ["逾期量", "发货量"],
          top: "0%",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.articleFrom.yqData,
            name: "逾期量",
            label: {
              show: true,
              position: "top", // 在上方显示
            },
          },
          {
            type: "bar", //形状为柱状图
            data: this.articleFrom.yData,
            name: "发货量",
            label: {
              show: true,
              position: "top", // 在上方显示
            },
          },
        ],
      };

      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    changTime() {
      if (this.ridio == 1) {
        this.updateData();
      } else {
        this.updateData1();
      }
      this.choose();
      this.updataYx();
    },
    updataYx() {
      var arr = [];
      arr = this.articleFrom.value1;

      var startTime = arr[0];
      var endDate = arr[arr.length - 1];
      let data = {
        startTime,
        endDate,
      };
      if(this.articleFrom.system_platform){
        data.system_platform = this.articleFrom.system_platform;
      }
      yxCount(data).then((res) => {
        this.articleFrom.ValidOrder = res.count;
        this.orderCount = res.allCount;
        this.articleFrom.badPayRate = res.badPay;
        this.articleFrom.overDueRent = res.overDueRent;
        this.articleFrom.allRent = res.allRent;
      });
    },
    updateData1() {
      var arr = [];
      arr = this.articleFrom.value1;

      var startTime = arr[0];
      var endDate = arr[arr.length - 1];
      let data = {
        startTime,
        endDate,
      };
      if(this.articleFrom.system_platform){
        data.system_platform = this.articleFrom.system_platform;
      }
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //销毁
      }
      validOrderCount(data).then((res) => {
        // this.articleFrom.xData=[];
        // this.articleFrom.yData=[];
        // console.log("ddd",res);

        if (res.length == 0) {
          this.articleFrom.xData = startTime + "---" + endDate;
          this.articleFrom.yData = 0;
        } else {
          this.articleFrom.xData = res.date;
          this.articleFrom.yData = res.count;
          this.articleFrom.yqData = res.yqCount;

          this.articleFrom.ValidOrder = res.rate; //有效单数的数量
        }

        // if (this.articleFrom.yData.length == 0){
        //   this.articleFrom.avgDelivery = '';
        // }else {
        //   this.articleFrom.avgDelivery=sum(this.articleFrom.yData);
        // }
        //有效订单量 || 待发货
        //
        this.initEcharts1();
      });
    },

    updateData() {
      // console.log(this.articleFrom.value1)
      var arr = [];
      arr = this.articleFrom.value1;

      var startTime = arr[0];
      var endDate = arr[arr.length - 1];

      // console.log(startTime,endDate)
      // var memberId = this.articleFrom.memberId;
      // var status = this.articleFrom.status;

      let data = {
        startTime,
        endDate,
      };
      if(this.articleFrom.system_platform){
        data.system_platform = this.articleFrom.system_platform;
      }

      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //销毁
      }
      shipMent(data).then((res) => {
        this.articleFrom.xData = [];
        this.articleFrom.yData = [];
        if (res.length == 0) {
          this.articleFrom.xData.push(startTime + "---" + endDate);
          this.articleFrom.yData.push(0);
        }
        // for(var i in res.deliverDate){
        //
        //   this.articleFrom.xData.push()
        // }

        this.articleFrom.xData = res.deliverDate;
        this.articleFrom.yData = res.eDayCount;
        this.articleFrom.yqData = res.eDayYqCount;
        // console.log(this.articleFrom.xData)
        // data =res[i].orderDate
        // this.articleFrom.yData = res[i].count
        // console.log(this.articleFrom.xData+'--'+ this.articleFrom.yData)
        // }

        // this.articleFrom.xData=data1;

        this.articleFrom.shipment = res.fCount; //总发货量
        this.articleFrom.avgDelivery = res.countRate; //总发货率
        this.articleFrom.overdueDelivery = res.yqCountRate; //总逾期率
        this.articleFrom.firstOverRate = res.firstOverRate; //首逾率
        this.articleFrom.riskBad = res.riskBad; //风控差的总单量

        this.initEcharts();
        // var sphValues = [1,2,3,4,5];
      });

      // function sum(arr) {
      //   var len = arr.length;
      //   if(len == 0){
      //     return 0;
      //   } else if (len == 1){
      //     return arr[0];
      //   } else {
      //     return arr[0] + sum(arr.slice(1));
      //   }
      // };

      // for (var i =0;i<arr.length;i++){
      //   console.log("---",arr[i])
      // }

      // const pickerVal = this.$refs.myDatePicker.getVal();
      // console.log("0000",pickerVal)
      // if (pickerVal !== 'error') {
      //   // this.articleFrom.value1 = pickerVal;
      //
      //   this.searchObj = { ...this.articleFrom };
      //   this.$refs.customPage.page = 1;
      //   this.getTableLists(this.searchObj);
      // }
    },

    onSubmit() {
      this.updateData();
    },

    inSubmit() {
      this.updateData1();
    },
    commonSubmit(){
      if(this.ridio == 1){
        this.updateData();
      }else{
        this.updateData1();
      }
      this.choose();
      this.updataYx();
    },

    onReset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.articleFrom = Object.assign({});
      // this.getTableLists();
    },
  },
};
</script>

<style lang="scss" scoped>
.content_wrap .el-range-editor.el-input__inner {
  width: 400px;
}
.el-tag.el-tag--success {
  background-color: #e8f5ee;
  border-color: #4cca86;
  color: #4cca86;
}
.el-tag.el-tag--danger {
  background-color: #ffeaec;
  border-color: #ff4146;
  color: #ff4146;
}
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table_titlle {
  height: 70px;
  line-height: 70px;
  span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin: 0 50px 0 15px;
  }
}
.show_icons {
  line-height: 24px;
  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .common_form_search {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
  }
  .container {
    height: 100px;
    line-height: 100px;
  }
  .pc_icon {
    background-image: url("../../assets/images/pc.png");
  }
  .h5_icon {
    background-image: url("../../assets/images/h5.png");
  }
  .xcx_icon {
    background-image: url("../../assets/images/alipay-xcx.png");
  }
}
</style>
